import React, { useState } from 'react';
import EditModal from './EditModal';
import BoardCastModal from './BoardCastModal';
import './styles/tts_index.less';
import TTSVideo from './TTSVideo';
import styled from '@emotion/styled';
import { useStream } from '../Context/StreamContext';
import AgentService from '@/modules/Agent';

const Container = styled.div`
	display: none;
`;

const index = () => {
	const { boardCastStream } = useStream();
	const PAGE_SIZE = 10; //每页数量
	const [page, setPage] = useState(1); //当前页，默认第一页开始

	const onPopupScroll = async (event: any) => {
		const { scrollTop, scrollHeight, clientHeight } = event.target;
		if (scrollHeight - (scrollTop + clientHeight) < 100) {
			setPage(page + 1);
			// AgentService.fetchTTSTalksWithPageSize({ scenId: AgentService.bizScenarioId, page: page, pageSize: PAGE_SIZE });
		}
	};

	return (
		<div>
			<EditModal onPopupScroll={onPopupScroll} ttsOptions={AgentService.getTTSTalks().map(item => ({ id: item.id, title: item.title, content: item.content }))} />
			<BoardCastModal />
			<Container>
				{boardCastStream().map((item, index) => {
					return <TTSVideo key={index} {...item} />;
				})}
			</Container>
		</div>
	);
};

export default index;
